<template>
	<view class="login-container">
		<!-- 头像昵称区域 -->
		<view class="top-box">
		   <button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
		     <image :src="userinfo.avatar"></image>
		   </button> 
		   <input type="nickname" class="nickname" placeholder="请输入昵称" v-model="userinfo.nickname"/>
		</view>
		<button type="primary" class="btn-login" @click="goLogin">一键登录</button>
		<text class="tips-text">登录后尽享更多权益</text>
	</view>
</template>

<script>
	import  {mapMutations,mapState} from 'vuex'
	export default {
		name:"my-login",
		data() {
			return {
				 userinfo:{
					 avatar: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
					 nickname: "",
					 id: '',
				 }
			};
		},
		computed:{
			...mapState('m_user',['token']),
			  // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
			    ...mapState('m_user', ['redirectInfo']),
		},
		methods:{
			...mapMutations('m_user',['updateUserInfo','updateToken','updateRedirectInfo']),
			// 选择用户头像
			onChooseAvatar(e) {
				console.log("详细信息",e.detail);
				this.userinfo.avatar = e.detail.avatarUrl
			 },
			// 用户授权之后，获取用户的基本信息
			  goLogin() {
				  // 将信息存到 vuex 中
				  this.updateUserInfo(this.userinfo);
				  console.log('点击登陆')
			        uni.getUserProfile({
			          desc: '进行用户授权',
			          success: (res) => {
						console.log('获取用户信息成功！')
						console.log('....................................................')
			            this.getToken(res)
			          },
			          fail: (res) => {
			            return uni.$showMsg('您取消了登录授权')
			          }
			        })
					},
					// 获取登录token
				  getToken(info){
				 // getToken(){
					 const that = this
						// 获取code对应的值
						uni.login({
							async success(res) {
								  // 准备参数对象
								  const consumer = {
								    code: res.code,
								    encryptedData: info.encryptedData,
								    iv: info.iv,
								    rawData: info.rawData,
								    signature: info.signature,
									// 由于 getUserInfo接口中rawData中数据被新规则修改为匿名数据，因此直接传下面两个参数，不再从后端解密获取
									avatar: that.userinfo.avatarUrl,
									nickname: that.userinfo.nickname,
									}
									  // 换取 token
									  const { data: loginResult } =  await uni.$http.post('/api/public/users/wxlogin', consumer)
									  // const { data: loginResult } =  uni.$http.post('/api/public/wxLogin', consumer)

									  if (loginResult.code !== 200) return uni.$showMsg('登录失败！');
									    // 2. 更新 vuex 中的 token
									  that.updateToken(loginResult.data.token);
									  that.userinfo.id = loginResult.data.id;
									  that.updateUserInfo(that.userinfo);
									  uni.$showMsg('登录成功');
									  // 判断 vuex 中的 redirectInfo 是否为 null
									// 如果不为 null，则登录成功之后，需要重新导航到对应的页面
									that.navigateBack();
								  
							},
							fail(res) {
							return uni.$showMsg('登录失败！')
							}
						})
					},
					// 返回登录之前的页面
					navigateBack() {
					  // redirectInfo 不为 null，并且导航方式为 switchTab
					  if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
					    // 调用小程序提供的 uni.switchTab() API 进行页面的导航
					    uni.switchTab({
					      // 要导航到的页面地址
					      url: this.redirectInfo.from,
					      // 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null
					      complete: () => {
					        this.updateRedirectInfo(null)
					      }
					    })
					  }
					}
		}
	}
</script>

<style lang="scss">
.login-container{
	height: 750rpx;
	background-color: #f8f8f8;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	.top-box {
	    height: 400rpx;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	
	    .avatar {
	      width: 90px;
		  padding: 0;
		  margin: 30rpx auto 0 auto;
	      border-radius: 50%;
	      box-shadow: 0 1px 5px black;
		  image {
		  	width: 90px;
		  	height: 90px;
		  	border-radius: 50%;
		  	display: block;
		  	border: 2px solid white;
		  }
	    }
	
	    .nickname {
	      color: blue;
	      font-weight: bold;
	      font-size: 18px;
	      margin-top: 15px;
	      margin-left: 130px;
		 
	    }
	  }
	
	&::after{
		content: '';
		display: block;
		width: 100%;
		height: 40px;
		background-color: white;
		position: absolute;
		bottom: 0;
		left: 0;
		border-radius: 100%;
		transform: translateY(50%);
	}
	.btn-login{
		width: 90%;
		border-radius: 100px;
		margin: 15px 0;
		background-color: #FFB6C1;
	}
	.tips-text{
		font-size: 12px;
		color: gray;
	}
}
</style>